{% extends 'base.html' %}

{% block title %}
	Délinquance en France
{% endblock %}


{% block content %}
  <!-- entete -->
	<div data-role="header">
		<h1>Délinquance en france</h1>
		<a href="../" data-icon="back">Back</a>
	</div>
  <!-- contenu -->
	<div data-role="content"> 
		<div class="ui-grid-a" id="grid0">
			<div class="ui-block-a" >
			     <a href="/tablePage" data-transition="slide" class="ui-bar ui-bar-c" >
			     		<div  class = "box">
			     			<img src="/media/images/final/Table.png" alt="Line"><br>
			     			<strong>Table</strong>
			     		</div>
			     </a>
			</div>
			<div class="ui-block-b" >
			     <a href="/linePage" data-transition="slide" class="ui-bar ui-bar-c" >
			     		<div class = "box">
			     			<img src="/media/images/final/Line.png" alt="Line"><br>
			     			<strong>Line</strong>
			     		</div>
			     </a>
			</div>
			<!--!<div class="ui-block-a">
				  <a href="/SPLinePage"  data-transition="slide" class="ui-bar ui-bar-c" >
			     		<div class = "box">
			     			<img src="/media/images/final/Line.png" alt="SPLine"><br>
			     			<strong>SPLine</strong>
			     		</div>
			     </a>
			</div>-->
			<div class="ui-block-a">
				 <a href="/AreaPage"  data-transition="slide" class="ui-bar ui-bar-c" >
			     		<div class = "box">
			     			<img src="/media/images/final/Area.png" alt="Area"><br>
			     			<strong>Area</strong>
			     		</div>
			     </a>
			</div>
			
			<!--  <div class="ui-block-a">
				  <a href="/AreaSplinePage" data-transition="slide" class="ui-bar ui-bar-c" >
			     		<div class = "box">
			     			<img src="/media/images/final/Area.png" alt="AreaSpLine"><br>
			     			<strong>AreaSpLine</strong>
			     		</div>
			     </a>
			</div>-->
			<div class="ui-block-b">
				 <a href="/PiePage" data-transition="slide" class="ui-bar ui-bar-c" >
			     		<div class = "box">
			     			<img src="/media/images/final/Pie.png" alt="Pie"><br>
			     			<strong>Pie</strong>
			     		</div>
			     </a>
			</div>
			<div class="ui-block-a">
				 <a href="/BarPage" data-transition="slide" class="ui-bar ui-bar-c" >
			     		<div class = "box">
			     			<img src="/media/images/final/Bar.png" alt="bar"><br>
			     			<strong>Bar</strong>
			     		</div>
			     </a>
			</div>
			
			<div class="ui-block-b">
				 <a href="/ColumnPage" data-transition="slide" class="ui-bar ui-bar-c" >
			     		<div class = "box">
			     			<img src="/media/images/final/Column.png" alt="Column"><br>
			     			<strong>Column</strong>
			     		</div>
			     </a>
			</div>
			<div class="ui-block-a">
				 <a href="/ScatterPage" data-transition="slide"class="ui-bar ui-bar-c" >
			     		<div class = "box">
			     			<img src="/media/images/final/Scatter.png" alt="Scatter"><br>
			     			<strong>Scatter</strong>
			     		</div>
			     </a>
			</div>
			<div class="ui-block-b">
				 <a href="/MapPage" data-transition="slide" class="ui-bar ui-bar-c">
			     		<div class = "box">
			     			<img src="/media/images/final/map.png" alt="map"><br>
			     			<strong>Map</strong>
			     		</div>
			     </a>
			</div>
		</div>
	</div>
		
	<!-- footer -->
	<div data-role="footer">
	 <br>
	 <br>
	</div>
	<script type="text/javascript">
	console.log(data);
	
	</script>
{% endblock %}
